/**
 * Created by Administrator on 2017/5/20 0020.
 */
$(function () {
    var louI = 0;
    var search = $(".logo");
    //三级菜单的数据请求，，，，累死我了……
    $.ajax({
        url: "my.json",
        success: function (res) {
            //json是一个三维数组,首先遍历整个数组；
            for (var i = 0; i < res.length; i++) {
                //创建一个li标签；
                var lastLi = $(".list-items");
                // console.log(lastLi.eq(0));
                //创建一个ul标签；
                var temptUl = $("<ul></ul>");
                //给ul标签加上写好的样式类名；
                temptUl.addClass("list-show");
                //json数组长度和我们想要添加在菜单里的长度是一样的，所以这里直接取i；
                lastLi.eq(i).append(temptUl);
                //遍历json文件数组中的第一个数组；
                for (var o = 0; o < res[i].length; o++) {
                    //给子类添加小总类，根据json第一个数组中的对象取到键值对；
                    var temptNode = $("<a href='#'>" + res[i][o]["list"] + "</a>");
                    //根据网页结构创建一个div，用来放子类的小总类；
                    var temptDiv = $("<div></div>");
                    //添加样式：
                    temptDiv.addClass("list-show-left");
                    //往div里添加刚刚取到的值；
                    temptDiv.append(temptNode);
                    //创建一个li；
                    var temptLi = $("<li></li>");

                    temptLi.append(temptDiv);
                    temptUl.append(temptLi);

                    //给小总类添加详细的类;
                    var temtpArr = res[i][o]["content"];
                    //["可瑞康","爱他美","惠氏","荷仕兰","牛栏","维达宝","WINNEY温妮","德国喜宝Hipp","荷兰美素","Golden Koala高登考拉","维凯瑞"]
                    var temptDiv1 = $("<div></div>");
                    temptDiv1.addClass("list-show-right");
                    temptLi.append(temptDiv1);
                    for (var j = 0; j < temtpArr.length; j++) {
                        var temptP = $("<a href='#'></a>");
                        temptP.append(temtpArr[j]);
                        temptDiv1.append(temptP)
                    }
                    temptUl.append(temptLi)
                }
            }
        }
    });
    //鼠标划过的效果;
    //头部滑动效果；
    $(".rate ul>li").on({
        mouseenter:function () {
            $(this).children("ol").show().end().animate({
                backgroundColor:"#fff"
            },200)
        },
        mouseleave:function () {
            $(this).children("ol").hide().end().animate({
                backgroundColor:"#f1f1f1"
            },200)
        }
    });
    //头部每个a标签都有颜色变化；
    $("#head-wrap").find("a[class!='login']").hover(function () {
        $(this).stop().animate({
            color:"#ee4242"
        },200)
    },function () {
        $(this).stop().animate({
            color:"#000000"
        },200)
    });
    //个人中心;
    $("#info").on({
       mouseenter:function () {
           $(this).stop().animate({
               backgroundColor:"#fff"
           });
           $(this).children(".bills").css("display","block")
       },
        mouseleave:function () {
            $(this).children(".bills").css("display","none");
            $(this).stop().animate({
                backgroundColor:"#f1f1f1"
            });
        }
    });
    //导航栏效果;
    $(".nav1 > li").on({
        mouseenter:function () {
            $(this).stop().animate({
                backgroundColor:"rgba(255,255,255,0.6)"
            },400).siblings("li").stop().animate({
                backgroundColor:"rgba(0,0,0,0)"
            },400)
        },
        mouseleave:function () {
            $(this).stop().animate({
                backgroundColor:"rgba(0,0,0,0)"
            },400)
        }
    });
    $("#sever").on({
        mouseenter:function () {
            $(this).children("ol").show()
        },
        mouseleave:function () {
            $(this).children("ol").hide()
        }
    });
    //二级菜单效果
    $(".sorts").on({
        mouseenter:function () {
            $(this).children(".sorts-list").css("display","block");
            $(".list-items").on("mouseenter",function () {
                $(this).children("ul").show().end().siblings().children("ul").hide();
                $(this).addClass("on").siblings("li").removeClass("on");
                $(this).css("background", "rgba(0,0,0,0.2)").siblings("li").css("background","rgba(255,255,255,1)");

                $(this).stop().animate({
                    borderLeftWidth:"3px",
                    borderLeftColor:"#ee4242",
                    paddingLeft:"40px"
                },300).siblings("li").stop().animate({
                    borderLeftWidth:"0px",
                    borderLeftColor:"#ee4242",
                    paddingLeft:"20px"
                });
            })
        },
        mouseleave:function () {
            $(this).children(".sorts-list").css("display","none")
        }
    });

    //点击侧边栏滚动；
    $(".nav11").on("click",function () {
        $(this).find("a").addClass("nav1_on").end().siblings("li").find("a").removeClass("nav1_on");
        louI = $(this).index() + 1;
        var top1 = $("#lou"+ louI).offset().top;
        $("body,html").animate({scrollTop:top1})
    });
    $("#a_top").on("click",function () {
        $("body,html").animate({scrollTop:0})
    });
    //搜索条固定顶部；
    var nav = $(".nav1_fixed");
    $(document).scroll(function () {
        var scrTop = $(document).scrollTop();//不可见区域的高度;

        // console.log(scrTop);
        if (scrTop > 600){
            search.addClass("logo_fixed");
            $("#sales-w").css("marginTop",110)
        }
        if (scrTop < 600){
            search.removeClass("logo_fixed");
            $("#sales-w").css("marginTop",0)
        }
        if (scrTop >= 2100){
            nav.show();
            var index=Math.floor((scrTop-2100)/585);
            $(".nav11").eq(index).find("a").addClass("nav1_on").end().siblings("li").find("a").removeClass("nav1_on")
        }else if(scrTop < 2100){
            nav.hide()
        }

    })

});